<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>搞笑首页</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/adaptation.js"></script>
	</head>
	<body>
		<div id="wrap">
			<div class="main" id="detailPage">
				<!--此乃头部-->
				<div id="header" class="nobd">
					<div class="dorminfo clearfix">
						<a href="javascript:void(0);" class="back"></a>
						<div class="dormcover">
							<img src="img/cover.png" alt="" />
							<!--男寝class为ui-boy,女寝class为ui-girl-->
							<span class="sex ui-boy"></span>
						</div>
						<div class="desc pt30">
							<p class="p1">东海小鸡鸡<span class="type">别墅</span></p>
							<p>诺丁汉<span class="num">房间编号：01123</span></p>
							<p class="des">简介：宇宙最美萌妹子</p>
						</div>
					</div>
				</div>
				
				<ul class="role-list">
					<li>
						<div class="cover">
							<img src="img/avatar.jpg" alt="" />
						</div>
						<div class="content">
							<h3>辣鸡美少女<span>5248565mkj</span></h3>
							<!--男生class boy 女生girl-->
							<div class="labels girl">
								<span>单身狗</span>
								<span>开黑高手</span>
								<span>电影爱好者</span>
								<span>吃货</span>
								<span>三号学生</span>
							</div>
						</div>
					</li>
					
					<li>
						<div class="cover">
							<img src="img/avatar.jpg" alt="" />
						</div>
						<div class="content">
							<h3>辣鸡美少女<span>5248565mkj</span></h3>
							<!--男生class boy 女生girl-->
							<div class="labels girl">
								<span>单身狗</span>
								<span>开黑高手</span>
								<span>电影爱好者</span>
								<span>吃货</span>
								<span>三号学生</span>
							</div>
						</div>
					</li>
					
					<li>
						<div class="cover">
							<img src="img/avatar.jpg" alt="" />
						</div>
						<div class="content">
							<h3>辣鸡美少女<span>5248565mkj</span></h3>
							<!--男生class boy 女生girl-->
							<div class="labels girl">
								<span>单身狗</span>
								<span>开黑高手</span>
								<span>电影爱好者</span>
								<span>吃货</span>
								<span>三号学生</span>
							</div>
						</div>
					</li>
					
					<li>
						<div class="cover">
							<img src="img/avatar.jpg" alt="" />
						</div>
						<div class="content">
							<h3>辣鸡美少女<span>5248565mkj</span></h3>
							<!--男生class boy 女生girl-->
							<div class="labels boy">
								<span>单身狗</span>
								<span>开黑高手</span>
								<span>电影爱好者</span>
								<span>吃货</span>
								<span>三号学生</span>
							</div>
						</div>
					</li>
				</ul>
				
				<div id="bottom">
					<a href="javascript:void(0);" class="ally" data-id="123"><i></i>结盟</a>
					<!--<a href="javascript:void(0);" class="ally isSend" data-id="123">已发送</a>-->
					<!--<a href="javascript:void(0);" class="ally allied" data-id="123">已结盟</a>-->
					<a href="javascript:void(0);" class="praise" data-id="123"><i></i><span>255</span></a>
				</div>
			</div>
		</div>
		
		<!--弹窗-->
		<div style="display: none">
			<div id="no-satisfy-box">
				<a href="javascript:void(0);" class="layer-close ui-layer-close"></a>
				<div class="title txt-no"></div>
				<p>请前往“我的寝室”邀请好友</p>
				<p>或完善个人信息。</p>
				<div class="btn-group">
					<a href="mydorm.html" class="ui-go"></a>
				</div>
			</div>
		</div>
		
		<script src="js/zepto.min.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/common.js"></script>
		<script>
			$(function(){
				//点赞
				$(document).on('click','.praise',function(){
					var isPraised = $(this).hasClass("praised");
					if(isPraised){
						remind("你已经点过赞了");
						return;
					}
					var id = $(this).data('id');
					var instance = this;
					$.ajax({
						type: "get",
						data: {id:id},
						dataType: "json",
						url: "data/praise.json",
						success: function(data){
							if(data.status){
								$(instance).addClass("praised");
								$(instance).find("span").text(Number($(instance).find("span").text())+1);
							}
						}
					});
				});
				
				//结盟
				$(document).on('click','.ally',function(){
					var isAllied = $(this).hasClass("allied");
					if(isAllied){
						return;
					}
					var isSend = $(this).hasClass("isSend");
					if(isSend){
						return;
					}
					var id = $(this).data("id");
					var instance = this;
					$.ajax({
						type: "get",
						data: {id:id},
						dataType: "json",
						url: "data/jm.json",
						success: function(data){
							if(data.status==true){
								$(instance).html("已发送");
								$(instance).addClass("isSend");
							}else{
								//条件不符
								layer.open({
									content: $("#no-satisfy-box")[0].outerHTML,
									shadeClose: false,
									className: "layer-border"
								});
							}
						}
					});
				});
				
				//返回
				$(".back").click(function(){
					location.href = document.referrer;
				});
			});
		</script>
	</body>
</html>
